{% extends "base.html" %}

{% block title %}JSON格式化工具 - 工具箱{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-4">JSON格式化工具</h1>
    <p class="text-gray-600 mb-6">一个简单高效的JSON格式化、校验和压缩工具，帮助开发者快速处理JSON数据。</p>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 输入区域 -->
        <div class="border rounded-lg shadow-sm p-4 bg-white">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-xl font-semibold">输入JSON</h2>
                <div class="space-x-2">
                    <button id="clearBtn" class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded text-sm">清空</button>
                    <button id="loadSampleBtn" class="px-3 py-1 bg-blue-100 hover:bg-blue-200 rounded text-sm">加载示例</button>
                </div>
            </div>
            <textarea id="jsonInput" class="w-full h-96 p-3 border rounded font-mono text-sm" placeholder="在此粘贴您的JSON数据..."></textarea>
        </div>

        <!-- 输出区域 -->
        <div class="border rounded-lg shadow-sm p-4 bg-white">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-xl font-semibold">结果输出</h2>
                <button id="copyBtn" class="px-3 py-1 bg-green-100 hover:bg-green-200 rounded text-sm">复制结果</button>
            </div>
            <pre id="jsonOutput" class="w-full h-96 p-3 border rounded overflow-auto font-mono text-sm bg-gray-50">输出将显示在这里...</pre>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="mt-6 bg-white p-4 border rounded-lg shadow-sm">
        <div class="flex flex-wrap gap-4 items-center">
            <div class="flex items-center">
                <span class="mr-2 font-medium">操作:</span>
                <div class="flex space-x-2">
                    <button id="formatBtn" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md">格式化</button>
                    <button id="minifyBtn" class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-md">压缩</button>
                    <button id="validateBtn" class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-md">验证</button>
                </div>
            </div>
            
            <div class="flex items-center">
                <span class="mr-2 font-medium">缩进:</span>
                <select id="indentSelect" class="border rounded px-2 py-1">
                    <option value="2">2空格</option>
                    <option value="4">4空格</option>
                    <option value="8">8空格</option>
                    <option value="tab">Tab</option>
                </select>
            </div>
            
            <div class="flex items-center">
                <label class="inline-flex items-center">
                    <input type="checkbox" id="sortKeysCheckbox" class="form-checkbox h-4 w-4 text-blue-600">
                    <span class="ml-2">按键排序</span>
                </label>
            </div>
        </div>
    </div>

    <!-- 使用说明 -->
    <div class="mt-6 bg-white p-4 border rounded-lg shadow-sm">
        <h2 class="text-xl font-semibold mb-3">使用说明</h2>
        <ul class="list-disc pl-5 space-y-2">
            <li>粘贴您的JSON数据到左侧输入框中</li>
            <li>使用上方按钮执行格式化、压缩或验证操作</li>
            <li>结果将显示在右侧输出框中</li>
            <li>可以设置缩进空格数和是否按键排序</li>
            <li>复制按钮可快速复制输出结果</li>
        </ul>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const jsonInput = document.getElementById('jsonInput');
    const jsonOutput = document.getElementById('jsonOutput');
    const formatBtn = document.getElementById('formatBtn');
    const minifyBtn = document.getElementById('minifyBtn');
    const validateBtn = document.getElementById('validateBtn');
    const clearBtn = document.getElementById('clearBtn');
    const loadSampleBtn = document.getElementById('loadSampleBtn');
    const copyBtn = document.getElementById('copyBtn');
    const indentSelect = document.getElementById('indentSelect');
    const sortKeysCheckbox = document.getElementById('sortKeysCheckbox');

    // 处理JSON的函数
    function processJSON(action) {
        const jsonStr = jsonInput.value.trim();
        if (!jsonStr) {
            showMessage('请输入JSON数据');
            return;
        }

        // 获取缩进设置
        let indent = parseInt(indentSelect.value);
        if (isNaN(indent)) {
            indent = indentSelect.value === 'tab' ? '\t' : 2;
        }

        // 准备请求数据
        const requestData = {
            json_string: jsonStr,
            action: action,
            indent: indent,
            sort_keys: sortKeysCheckbox.checked
        };

        // 发送请求到后端API
        fetch('/tools/dev/json_formatter', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(requestData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.error === 0) {
                jsonOutput.textContent = data.body.result;
                jsonOutput.classList.remove('text-red-500');
            } else {
                showError(data.message);
            }
        })
        .catch(error => {
            showError('请求失败: ' + error.message);
        });
    }

    // 显示错误消息
    function showError(message) {
        jsonOutput.textContent = '错误: ' + message;
        jsonOutput.classList.add('text-red-500');
    }

    // 显示消息
    function showMessage(message) {
        jsonOutput.textContent = message;
        jsonOutput.classList.remove('text-red-500');
    }

    // 格式化按钮点击事件
    formatBtn.addEventListener('click', function() {
        processJSON('format');
    });

    // 压缩按钮点击事件
    minifyBtn.addEventListener('click', function() {
        processJSON('minify');
    });

    // 验证按钮点击事件
    validateBtn.addEventListener('click', function() {
        processJSON('validate');
    });

    // 清空按钮点击事件
    clearBtn.addEventListener('click', function() {
        jsonInput.value = '';
        jsonOutput.textContent = '输出将显示在这里...';
        jsonOutput.classList.remove('text-red-500');
    });

    // 复制按钮点击事件
    copyBtn.addEventListener('click', function() {
        if (jsonOutput.textContent && jsonOutput.textContent !== '输出将显示在这里...') {
            navigator.clipboard.writeText(jsonOutput.textContent)
                .then(() => {
                    const originalText = copyBtn.textContent;
                    copyBtn.textContent = '已复制!';
                    copyBtn.classList.add('bg-green-200');
                    setTimeout(() => {
                        copyBtn.textContent = originalText;
                        copyBtn.classList.remove('bg-green-200');
                    }, 1500);
                })
                .catch(err => {
                    showError('复制失败: ' + err);
                });
        }
    });

    // 加载示例按钮点击事件
    loadSampleBtn.addEventListener('click', function() {
        jsonInput.value = JSON.stringify({
            "name": "JSON格式化工具",
            "version": "1.0.0",
            "description": "一个简单高效的JSON格式化工具",
            "features": [
                "格式化",
                "压缩",
                "验证"
            ],
            "settings": {
                "indent": 2,
                "sortKeys": false
            },
            "isActive": true,
            "lastUpdated": "2023-07-15T14:30:00Z"
        });
    });
});
</script>
{% endblock %} 